---
title: Hover Card
description: Allows users with vision to preview the content hidden behind an element before hovering or pressing.
---
{/* prettier-ignore-start */}
{/* prettier-ignore-end */}

import Code from '@/components/Code.astro';
import { LinkButton } from '@/components/react/LinkButton';
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
import importedCode from '@rnr/reusables/components/ui/hover-card?raw';

<LinkButton href='https://rn-primitives.vercel.app/hover-card'>Hover Card Primitive</LinkButton>
<LinkButton target='_blank' href='https://rnr-showcase.vercel.app/hover-card'>
  Demo
</LinkButton>

<br />

Allows users with vision to preview the content hidden behind an element before hovering or pressing.

### Installation

<Tabs>
  <TabItem label='CLI'> 
    ```bash
    npx @react-native-reusables/cli@latest add hover-card
    ```
  </TabItem>
  <TabItem label='Manual'>
    <Aside type='tip' title='Dependencies'>
      Before copy/pasting, add the <a href='https://rn-primitives.vercel.app/hover-card' className='text-white font-bold'> hover-card primitive</a> to your project.
    </Aside>

    <br />

    **Copy/paste the following code to `~/components/ui/hover-card.tsx`:**

    <Code code={importedCode} lang='tsx' title='~/components/ui/hover-card.tsx' />
  </TabItem>
</Tabs>


### Usage

<Aside type="caution">

  Requires a `<PortalHost />` as the last child of your `<Root/>` (`app/_layout.tsx`) component

  ```tsx
  import { PortalHost } from '@rn-primitives/portal';

  function Root() {
    return (
      <>
        <Stack />
        {/* Default Portal Host (one per app) */}
        <PortalHost />
      </>
    );
  }
  ```

</Aside>

```tsx
import { View } from 'react-native';
import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar';
import { Button } from '~/components/ui/button';
import { HoverCard, HoverCardContent, HoverCardTrigger } from '~/components/ui/hover-card';
import { Text } from '~/components/ui/text';
import { CalendarDays } from '~/lib/icons/CalendarDays';

function Example() {
  return (
    <View className='flex-1 justify-center items-center p-6 gap-12'>
      <HoverCard>
        <HoverCardTrigger asChild>
          <Button variant='link' size='lg'>
            <Text>@nextjs</Text>
          </Button>
        </HoverCardTrigger>
        <HoverCardContent className='w-80 native:w-96'>
          <View className='flex flex-row justify-between gap-4'>
            <Avatar alt='Vercel avatar'>
              <AvatarImage source={{ uri: 'https://github.com/vercel.png' }} />
              <AvatarFallback>
                <Text>VA</Text>
              </AvatarFallback>
            </Avatar>
            <View className='gap-1 flex-1'>
              <Text className='text-sm native:text-base font-semibold'>@nextjs</Text>
              <Text className='text-sm native:text-base'>
                The React Framework – created and maintained by @vercel.
              </Text>
              <View className='flex flex-row items-center pt-2 gap-2'>
                <CalendarDays size={14} className='text-foreground opacity-70' />
                <Text className='text-xs native:text-sm text-muted-foreground'>
                  Joined December 2021
                </Text>
              </View>
            </View>
          </View>
        </HoverCardContent>
      </HoverCard>
    </View>
  );
}
```

## Props

### HoverCard

Extends [`View`](https://reactnative.dev/docs/view#props) props

|     Prop     |           Type           |     Note     |
| :----------: | :----------------------: | :----------: |
| onOpenChange| (value: boolean) => void |                         |
|   asChild    |         boolean          |       _(optional)_      |
|  relativeTo  | 'longPress' \| 'trigger' | Native Only_(optional)_ |

### HoverCardTrigger

Extends [`Pressable`](https://reactnative.dev/docs/pressable#props) props

|  Prop   |  Type   |     Note     |
| :-----: | :-----: | :----------: |
| asChild | boolean | _(optional)_ |

### HoverCardContent

Extends [`View`](https://reactnative.dev/docs/view#props) props

|          Prop           |                     Type                     |           Note           |
| :---------------------: | :------------------------------------------: | :----------------------: |
|         asChild         |                   boolean                    |       _(optional)_       |
|       forceMount        |              true \| undefined               |       _(optional)_       |
|       alignOffset       |                    number                    |       _(optional)_       |
|         insets          |                    Insets                    |       _(optional)_       |
|     avoidCollisions     |                   boolean                    |       _(optional)_       |
|          align          |         'start' \| 'center' \| 'end'         |       _(optional)_       |
|          side           |              'top' \| 'bottom'               |       _(optional)_       |
|       sideOffset        |                    number                    |       _(optional)_       |
| disablePositioningStyle |                   boolean                    | Native Only _(optional)_ |
|    collisionBoundary    |  Element \| null \| Array\<Element \| null>  |  Web Only _(optional)_   |
|         sticky          |            'partial' \| 'always'             |  Web Only _(optional)_   |
|    hideWhenDetached     |                   boolean                    |  Web Only _(optional)_   |
